import React, { Component } from 'react';
import { Card, Alert, Table, Tooltip } from 'antd';
import styles from './index.less';
import MyPopover from './pages/MyPopover';
import * as apis from '@/services/SystemMgr';
import AuthorizedButton from '@/components/AuthorizedButton';

export default class SupplyPlanTime extends Component {
  constructor(props) {
    super(props);
    this.state = {
      num: 261,
      columns: [
        {
          title: '序号',
          dataIndex: 'number',
          key: 'number',
          width: '5%',
          align: 'center',
        },
        {
          title: '区域',
          dataIndex: 'region',
          key: 'region',
          render: text => (
            <Tooltip placement="topLeft" title={text}>
              <div
                style={{
                  width: '100%',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                }}
              >
                {text}
              </div>
            </Tooltip>
          ),
        },
        {
          title: '推送时间',
          dataIndex: 'pushItem',
          key: 'pushItem',
          width: '10%',
          align: 'center',
          render: text => (
            <Tooltip placement="topLeft" title={text}>
              <div
                style={{
                  width: '100%',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                }}
              >
                {text}
              </div>
            </Tooltip>
          ),
        },
        {
          title: '操作',
          dataIndex: 'activ',
          key: 'activ',
          align: 'center',
          width: '10%',
          render: (text, record) => (
            <AuthorizedButton authority="systemConfig_pushSupplyPlan_pushTiem">
              <MyPopover recordID={record.id} upDate={this.upDate} />
            </AuthorizedButton>
          ),
        },
      ],
      data: [],
    };
  }

  componentDidMount() {
    this.getPushSupplyPlanData();
  }

  async getPushSupplyPlanData() {
    const data = await apis.getSysDeliveryPlanUsingGET({ params: {} });
    const arr = [];
    if (data.code === 1) {
      data.data.forEach((item, index) => {
        arr.push({
          id: item.id,
          number: index + 1,
          region: item.regionName,
          pushItem: item.pushTime,
        });
      });
      this.setState({
        data: arr,
      });
    }
  }

  upDate = () => {
    this.getPushSupplyPlanData();
  };

  render() {
    const { num } = this.state;
    const tableHeight = document.body.clientHeight - num;
    return (
      <div className={styles.SupplyPlanTime}>
        <Card>
          <Alert
            message="供货计划每月在推送时间当天的24:00推送给销售管理系统。"
            type="warning"
            showIcon
            closable
            afterClose={() => {
              this.setState({ num: 215 });
            }}
          />
          <div className="content">
            <Table
              loading={false}
              scroll={{ y: tableHeight }}
              bordered
              columns={this.state.columns}
              dataSource={this.state.data}
              pagination={false}
            />
          </div>
        </Card>
      </div>
    );
  }
}
